<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="add">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <a-space v-if="column.key === 'oper'">
          <a-button type="primary" @click="edit(record)">{{ t("common.edit") }}</a-button>
          <a-button danger type="primary" @click="del(record)">{{ t("common.delete") }}</a-button>
          <a-button type="primary" @click="toggleLine(record)">{{
            record.status ? t("common.doOffline") : t("common.doOnline")
          }}</a-button>
        </a-space>
        <a-image v-else-if="column.key === 'avatar'" :src="record.avatar" :width="200" />
      </template>
    </a-table>
    <a-modal v-model:visible="visible" :title="title" @ok="ok">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="上传头像" v-bind="validateInfos.avatar">
          <CommonUpload v-model:fileUrl="modelRef.avatar" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { Api, Avatar } from "/@/api/manage/setting";
import { useCURD } from "/@/hooks/web/useCURD";
import { toggleLineByStatus } from "/@/components/business";

export default defineComponent({
  components: {},
  setup() {
    const { t } = useI18n();
    const columns = [
      {
        title: "头像ID",
        dataIndex: "id",
      },
      {
        title: "图片",
        dataIndex: "avatar",
        key: "avatar",
      },
      {
        title: "状态",
        dataIndex: "status",
        customRender({ text }: any) {
          return text ? t("common.online") : t("common.offline");
        },
      },
      {
        title: "操作",
        dataIndex: "oper",
        key: "oper",
      },
    ];
    const modelRef = reactive<Avatar>({
      avatar: "",
    });
    const {
      modalVisible,
      modalTitle,
      validateInfos,
      showCreateModal,
      showUpdateModal,
      modalOk,
      deleteRecord,
      pagination,
      tableLoading,
      tableData,
      reloadTable,
      curd,
    } = useCURD<Avatar, any>({
      isPagination: true,
      createTitle: "新增标签",
      updateTitle: "编辑标签",
      deleteMessage: "确认删除该标签吗？",
      modelRef,
      cudUrl: Api.avatars,
      getPageUrl: Api.avatars,
      onBeforeOk(data, isCreate) {
        if (isCreate) {
          data.status = 0;
        } else {
          delete data.status;
        }
      },
    });
    onMounted(async () => {
      await reloadTable();
    });
    function toggleLine(record: Avatar) {
      toggleLineByStatus({
        record,
        curd,
        reloadTable,
        tableLoading,
      });
    }
    return {
      t,
      columns,
      pagination,
      tableLoading,
      tableData,
      add: showCreateModal,
      visible: modalVisible,
      title: modalTitle,
      validateInfos,
      modelRef,
      ok: modalOk,
      del: deleteRecord,
      edit: showUpdateModal,
      beforePicListUpload() {},
      picListFile: [],
      handlePicListChange() {},
      picListUrl: "",
      picListLoading: false,
      toggleLine,
    };
  },
});
</script>
<style lang="less"></style>
